<template>
  <div id="job" class="list">
    <div class="breadcrumb">
  		<Breadcrumb separator=">">
        <BreadcrumbItem to="">系统维护</BreadcrumbItem>
        <BreadcrumbItem to="/system/job">岗位管理</BreadcrumbItem>
    	</Breadcrumb>
			<div class="btns">
				<ButtonGroup>
	        <Button type="text" @click="openAdd"><i class="fa fa-plus"></i><span>新增岗位</span></Button>
	    	</ButtonGroup>
			</div>
    </div>

		<TableSearch>
      <Form inline>
  			<Row :gutter="16">
  				<Col :md="24">
            <FormItem>
              <Input placeholder="请输入岗位名称关键词" v-model="sJobName"></Input>
            </FormItem>
  				</Col>
  			</Row>
      </Form>
			<Button type="primary" class="search-btn" icon="search" @click="search" long>查询</Button>
		</TableSearch>

    <div class="table-content">
			<div class="table">
				<table>
					<thead>
						<th>岗位名称</th>
						<th>是否管理员</th>
						<th>岗位描述</th>
						<th>操作</th>
					</thead>
					<tbody>
						<tr v-for="(v,i) in pageData.thisPageElements" :key="`job-list-key-${v.id}`">
							<td>{{v.jobName}}</td>
							<td>{{v.issa ? '是':'否'}}</td>
							<td>{{v.description}}</td>
							<td>
								<a @click="openView(v)">查看</a>
								<a v-if="!v.issa" @click="openEdit(v)">编辑</a>
								<a v-if="!v.issa" @click="openDelete(v)">删除</a>
							</td>
						</tr>
            <tr v-if="!isLoading && pageData.totalNumberOfElements <= 0">
              <td colspan="4">暂无数据</td>
            </tr>
					</tbody>
				</table>
			</div>

			<Page :total="pageData.totalNumberOfElements" :page-size="pageData.pageSize" :current="current" @on-change="loadPage" show-total></Page>
			<Spin size="large" fix v-if="isLoading"></Spin>
		</div>

    <JobModal :jobId="jobId" :modal="modal" :modalTitle="modalTitle" :modalType="modalType" @closeDetail="closeDetail" @add="onAdd" @edit="onEdit"></JobModal>

  </div>
</template>

<script>
	import {mapState,mapActions} from 'vuex'
	import JobModal from './JobModal'

  export default {
    mounted(){

    },
    components:{
      'JobModal':JobModal
    },
    data(){
      return {
        current:1,
        sJobName:'',
        modal:false,
        modalTitle:'',
        modalType:1,
        jobId:null,
        submitForm:{}
      }
    },
    computed:{
      ...mapState('system/job',['pageData','isLoading'])
    },
    methods:{
      ...mapActions('system/job',['reload','loadView','deleteJob']),
      search(){
        this.submitForm = {name:this.sJobName};
        this.loadPage(1);
      },
      loadPage(i){
        this.current = i;
        this.reload({pageNum:this.current,...this.submitForm});
      },
      openView(v){
        this.modalTitle = `查看岗位`;
        this.modalType = 3;
        this.modal = true;
        this.jobId = v.id;
      },
      openEdit(v){
        this.modalTitle = '编辑岗位';
        this.modalType = 2;
        this.modal = true;
        this.jobId = v.id;
      },
      openAdd(){
        this.modalTitle = '新增岗位';
        this.modalType = 1;
        this.modal = true;
        this.jobId = '';
      },
      closeDetail(){
        this.modal = false;
        this.jobId = null;
      },
      onAdd(){
        this.loadPage(1);
      },
      onEdit(){
        this.loadPage(this.current);
      },
			deleteLoadPage(){
				let total = this.pageData.totalNumberOfElements - 1;
				let pageSize = parseInt(total / this.pageData.pageSize) + (total % this.pageData.pageSize > 0 ? 1 : 0);
				if (this.current > 1 && this.current > pageSize) {
					this.current--;
				}
				this.loadPage(this.current);
			},
      openDelete(v){
        this.$Modal.confirm({
            title: '删除岗位',
            content: `是否确定删除 ${v.jobName}`,
            loading: true,
            onOk:async ()=>{
            	let res = await this.deleteJob(v.id);
            	if(res.success){
            		this.$Modal.remove();
            		this.deleteLoadPage();
            		this.$Message.success('删除成功');
							}else{
								this.$Modal.remove();
								this.$Message.error(res.msg);
							}
            }
        });
      }
    }
  };
</script>
